<template>
  <div class="nearby">
    <h3 class="nearby__title">附近店铺</h3>
    <router-link :to="'/shop/' + item._id" v-for="(item) in nearByList" :key="item._id" >
      <shopInfo :item="item" />
    </router-link>

  </div>
</template>

<script>
import { ref } from 'vue'
import { get } from '../../utils/request'
import shopInfo from '@/components/ShopInfo.vue'
const useNearByListEffect = () => {
  const nearByList = ref([])
  const getNearbyList = async () => {
    const result = await get('/api/shop/hot-list')
    if (result?.data?.errno === 0 && result?.data?.data?.length) {
      nearByList.value = result.data.data
    }
  }
  return { nearByList, getNearbyList }
}
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Nearby',
  components: { shopInfo },
  setup () {
    const { nearByList, getNearbyList } = useNearByListEffect()
    getNearbyList()
    return { nearByList }
  }
}
</script>

<style lang="scss" scoped>
@import '../../style/virables';
.nearby{
  &__title{
    margin: .16rem 0 .04rem 0;
    font-size: .18rem;
    color: $content-fontcolor;
    font-weight: normal;
  }
  a{
    text-decoration: none;
  }
  &__item{
    display: flex;
    padding-top: .12rem ;
    &__img{
      margin-right: .16rem;
      width: .56rem;
      height: .56rem;
    }
  }
  &__content{
    flex: 1;
    padding-bottom: .12rem ;
    border-bottom: 1px solid #ccc;
    &__title{
      line-height: .22rem;
      font-size: .16rem;
      color: $content-fontcolor;
    }
    &__tags{
      margin-top: .08rem;
      line-height: .18rem;
      font-size: .13rem;
      color: $content-fontcolor;
    }
    &__tag{
      margin-right: .16rem;
    }
    &__highlight{
      color: #E93B3B;
      line-height: .18rem;
      font-size: .13rem;
      margin: .08rem 0 0 0;
    }
  }
}
</style>
